<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view class="calendar">
		<view class="title">
			<u-icon v-if="show.left" size="30rpx" color="rgba(24,24,26,0.60)" name="arrow-left"
				@click="nextTime('left')"></u-icon>
			<u-text :text="nowtime" align="center" margin="10px"></u-text>
			<u-icon v-if="show.right" size="30rpx" color="rgba(24,24,26,0.60)" name="arrow-right"
				@click="nextTime('right')"></u-icon>
		</view>
		<u-grid :border="false" col="7">
			<u-grid-item v-for="(time,index) in dataTimeList" :key="index">
				<text class="grid-text">{{time}}</text>
			</u-grid-item>
		</u-grid>
		<u-gap height="15" bgColor="#fff"></u-gap>
		<view class="gridBox">
			<view class="griditem" v-for="(item,index) in arr" :key="index" @click="handelDate(item)">
				<template v-if="item.type==='不可签到'">
					<text class="grid-text day" :class="item.styleClass">{{item.day}}</text>
				</template>
				<template v-else>
					<text class="grid-text day" :class="item.styleClass">{{item.day}}</text>
				</template>
			</view>
		</view>
		<!-- <u-grid :border="false" col="7">
			<u-grid-item v-for="(item,index) in arr" :key="index" @click="handelDate(item)">
				<template v-if="item.type==='不可签到'">
					<text class="grid-text day" :class="item.styleClass">{{item.day}}</text>
				</template>
				<template v-else>
					<text class="grid-text day" :class="item.styleClass">{{item.day}}</text>
				</template>
			</u-grid-item>
		</u-grid> -->
	</view>
</template>

<script>
	export default {
		props: {
			data: Object
		},
		data() {
			return {
				show: false,
				dataTimeList: ["日", "一", "二", "三", "四", "五", "六"],
				nowtime: "",
				date: "",
				nowDay: '',
				currentWeekday: "",
				lastMonthDays: "",
				currentMonthDays: "",
				arr: [],
				show: {
					left: false,
					right: false
				}
			}
		},
		watch: {
			data: { //深度监听，可监听到对象、数组的变化
				handler(val, oldVal) {
					this.getData()
				},
				deep: true //true 深度监听
			}
		},
		computed: {

		},
		mounted() {
			this.info()
		},
		methods: {
			info() {
				this.getDateTime()
			},
			getDateTime() {
				this.nowtime = this.$moment().startOf('month').format("YYYY年MM月")
				this.nowDay = this.$moment().format("x") - 0
				this.show.left = true
				this.show.right = false
				this.getData()
			},
			getData() {
				const startMonthDay = this.$moment(this.nowDay).startOf('month').format("x") - 0
				const endMonthDay = this.$moment(this.nowDay).endOf('month').format("x") - 0
				const startTime = this.$moment(startMonthDay).startOf('isoweek').format("x") - 0
				const endTime = this.$moment(endMonthDay).endOf('isoweek').format("x") - 0
				const num = parseInt((endTime - startTime) / 86400000)
				this.arr = []
				let monthType = ""
				for (let i = 0; i <= num; i++) {
					const t = startTime + 86400000 * i
					let monthType = ""
					if (t < startMonthDay) {
						monthType = "上月"
					} else if (t > endMonthDay) {
						monthType = "下月"
					} else {
						monthType = "当月"
					}
					let data = {
						'day': this.$moment(t).format("DD"),
						"isshow": false,
						"active": false,
						"styleClass": "",
						"time": t,
						"type": "",
						"index": i,
						"monthType": monthType
					}
					data.styleClass = this.datatime(data)
					this.arr.push(data)
				}
				this.$emit("change", this.arr)
			},

			datatime(item) {
				let border = "info"
				const that = this
				let oneList = []
				if (this.data.list) {
					const day = this.$moment(item.time).format("yyyy-MM-DD")
					oneList = this.data.list.filter(res => res.signTime.indexOf(day) !== -1)
					if (oneList[0]) {
						border = "borderon"
						item.type = "已签到"
						item.isSign = oneList[0].isSign
						item.id = oneList[0].id
					} else {
						const nowDay = this.$moment().format("yyyy-MM-DD")
						const timeDay = this.$moment(item.time).format("yyyy-MM-DD")
						if (nowDay === timeDay) {
							border = "on"
							item.type = "可签到"
							console.log(item, "1111111")
						} else {
							border = "border"
							item.type = "补签"
						}
					}
				}
				const now = this.$moment().format("x")
				if (item.time > now) {
					border = "info"
					item.type = "不可签到"
				}
				return border
			},

			handelDate(item) {
				this.$emit("daychange", item)
			},
			nextTime(type) {
				let time = ""
				if (type === "left") {
					this.nowDay = this.$moment(this.nowDay - 0).subtract(1, "months").format("x") - 0
				} else if (type === "right") {
					this.nowDay = this.$moment(this.nowDay - 0).add(1, "months").format("x") - 0
				}
				this.nowtime = this.$moment(this.nowDay - 0).format("YYYY年MM月")
				const n = this.$moment().format("YYYYMM") - 0
				const m = this.$moment(this.nowDay - 0).format("YYYYMM") - 0
				this.show.right = (m - n) < 0 ? true : false
				this.getData()
				this.$emit("timechange", this.nowDay)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar {
		width: 100%;
		background: #FFF;
		margin: 0 auto;

		.title {
			flex-direction: row;
			flex-wrap: wrap;
			display: flex;
			padding: 5px 24px;
		}

		.gridBox {
			justify-content: flex-start;
			width: 100%;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;
			justify-content: center;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			display: flex;
			flex-shrink: 0;
			flex-grow: 0;
			flex-basis: auto;
			align-items: stretch;
			align-content: flex-start;

			.griditem {
				ackground: transparent;
				width: 14.285714285714286%;
				align-items: center;
				justify-content: center;
				position: relative;
				flex-direction: column;
				box-sizing: border-box;
				display: flex;
				position: relative;
				float: left;
				margin-top: 1rpx;
				flex-shrink: 0;
				flex-grow: 0;
				flex-basis: auto;
				align-content: flex-start;
			}
		}

		.grid-text {
			font-size: 24rpx;
			color: rgba(24, 24, 26, 0.90);

			&.day {
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				border-radius: 100%;
				margin: 10rpx 0;
				border: 1px solid #FFF;
			}

			&.info {
				color: rgba(24, 24, 26, 0.40);
			}

			&.border {
				border: 1px solid rgba(0, 0, 0, 0.2);
			}

			&.borderon {
				border: 1px solid rgba(241, 131, 28, 0.9);
			}

			&.on {
				border: 1px solid rgba(241, 131, 28, 0.9);
				background: rgba(241, 131, 28, 0.9);
				color: #FFF;
			}
		}
	}
</style>
